<template>
  <!-- 查看日志 -->
  <div ref="checkDialog">
    <el-dialog
      v-model="editView"
      title="操作日志详细"
      destroy-on-close
      :append-to="checkDialog"
      align-center
      :draggable="true"
      width="960"
      @close="cancel"
    >
      <el-form :model="form" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="登录信息：">
              {{ form.operName }} / {{ form.deptName }} / {{ form.operIp }} /
              {{ form.operLocation }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求信息：">
              {{ form.requestMethod }} {{ form.operUrl }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作模块："
              >{{ form.title }} / {{ typeFormat(form) }}</el-form-item
            >
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{
              form.jsonResult
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 0">正常</div>
              <div v-else-if="form.status === 1">失败</div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="操作时间：">{{
              parseTime(form.operTime)
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="form.status === 1">
              {{ form.errorMsg }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click.stop="cancel">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch, nextTick } from "vue";
import { useDict } from "@/utils/dict.js";
import { selectDictLabel, parseTime } from "@/utils/common.js";
const { sys_common_status } = useDict("sys_common_status");
const emit = defineEmits(["updateModelValue", "cancel"]);
const props = defineProps({
  handle: {
    type: String,
    default: "操作",
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
  curId: {},
  data: {
    type: Object,
  },
});
const form = ref({});
const checkDialog = ref();
// 表单重置
const resetForm = () => {
  form.value = {};
};

/** 操作日志类型字典翻译 */
function typeFormat(row, column) {
  const operTypeList = [
    { label: "新增", value: "1", elTagType: "success" },
    { label: "修改", value: "2", elTagType: "primary" },
    { label: "删除", value: "3", elTagType: "danger" },
    { label: "查询", value: "13", elTagType: "info" },
  ];
  return selectDictLabel(operTypeList, row.businessType);
}
const editView = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    console.log(val);
    emit("updateModelValue", val);
  },
});

const cancel = () => {
  emit("cancel");
};

watch(editView, (val) => {
  if (val) {
    // 数据回显

    form.value = props.data;
    console.log(props.data);
    // }
  } else {
  }
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__title) {
  font-size: 20px !important;
  font-weight: 800;
}
:deep(.el-form-item__label) {
  font-size: 18px !important;
}
:deep(.el-form-item__content) {
  word-break: break-word;
  // word-break: break-all;
}
:deep(.el-dialog__body) {
  max-height: 70vh;
  overflow: auto;
}
</style>
